<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<body>

    //指定Vue实例的挂载位置
    <div id="app"></div>
    <script>
        // 创建vue实例
        //1.为什么要new Vue(),直接调用Vue（）函数不行吗 ？  
        //不行，因为直接调用Vue（）函数，不创建实例的话，会出现以下错误
        //Vue is not a constructor and should be called with the `new` keyword
    
        //2.关于Vue构造函数的参数 options?
        //options翻译为多个选项，Vue框架要求这个options参数必须是个纯粹的js对象：{}
        //在{ }对象可以编写大量的key：value对 ，一个key value对就是一个配置项
        //主要是通过options这个参数来给Vue实例指定多个配置项

        //3.关于Template配置项
        //template翻译为模版
        //template配置项用来指定什么？用来指定模版语句，模版语句是一个字符串形式的
        //什么是模版语句？
        //Vue框架自己制定了一些具有特殊含义的特殊符号
        //我们写Vue模版语句的时候不能乱写，要遵守Vue框架的语法规则
        //模版语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则，也可以是Html代码+Vue的特殊规则
        //template后面的模版语句会被Vue框架的编译器进行编译，编译成浏览器能够识别的html代码
        
        const myvue = new Vue({
            template: '<h1> hello </h1>'
        })

        //将Vue实例挂载到id为app的元素的位置上
        //Vue实例都有一个$mount()方法，这个方法的作用是什么？
        //将Vue实例挂载到指定的位置上
        
        //#app显眼是一个id选择器，这个语法借鉴了css
        myvue.$mount('#app')
    </script>
</body>

</html>